<template>
  <div class="container">
    <span class="title">操作日志</span>
    <el-card class="main-card">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item >
          <el-input v-model="studentId" placeholder="请输入学生学号查询" style="width: 160px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="studentName" placeholder="请输入学生姓名查询" style="width: 160px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="operatorId" placeholder="请输入操作人工号查询" style="width: 175px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="operatorName" placeholder="请输入操作人姓名查询" style="width: 175px;"></el-input>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px;">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-select v-model="operationType" placeholder="请选择操作类型" style="width: 150px;">
            <el-option label="新增学生" value="新增学生"></el-option>
            <el-option label="编辑信息" value="编辑信息"></el-option>
            <el-option label="延长时间" value="延长时间"></el-option>
          </el-select>
          <el-button type="primary" @click="search" class="search-button">查询</el-button>
          <el-button @click="fetchData">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="logs.slice((currentPage - 1) * pageSize, currentPage * pageSize)" style="width: 100%">
        <el-table-column prop="logId" width="110" label="序号"  header-align="center" align="center" class="table-header"></el-table-column>
        <el-table-column prop="operationType" width="200" label="操作类型" header-align="center" align="center" class="table-header"></el-table-column>
        <el-table-column prop="name" label="姓名" width="150" header-align="center" align="center" class="table-header"></el-table-column>
        <el-table-column prop="studentId" label="对应学号" width="200" header-align="center" align="center" class="table-header"></el-table-column>
        <el-table-column prop="operatorName" label="操作人" width="140" header-align="center" align="center" class="table-header"></el-table-column>
        <el-table-column prop="operatorId" label="操作人工号" width="200" header-align="center" align="center" class="table-header"></el-table-column>
        <el-table-column prop="operationTime" label="操作时间" width="200"  header-align="center" align="center" class="table-header"></el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
            background
            layout="prev, pager, next, sizes, total, jumper"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            :page-sizes="[10, 20]"
            @current-change="handlePageChange"
            @size-change="handleSizeChange">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getAllLogs, selectLogs} from '../../../../api/api'

export default {
  name: 'Second',
  data () {
    return {
      title: '操作日志', // 页面标题
      studentId: '', // 学生Id输入
      studentName: '', // 学生姓名输入
      operatorId: '', // 操作人Id输入
      operatorName: '', // 操作人姓名输入
      dateRange: [], // 日期范围选择
      operationType: '', // 操作类型选择
      logs: [], // 表格数据
      total: 0, // 总数据量
      pageSize: 20, // 每页显示条数
      currentPage: 1, // 当前页码
      jumpPage: 1 // 跳转页码
    }
  },
  async created () {
    await this.fetchData()
  },
  methods: {
    async fetchData () {
      try {
        const res = await getAllLogs()
        if (res.status && res.data) {
          this.logs = res.data.map(item => ({
            logId: item.logId,
            operationType: item.operationType,
            name: item.name,
            studentId: item.studentId,
            operatorName: item.operatorName,
            operatorId: item.operatorId,
            operationTime: item.operationTime.replace('T', ' ')
          }))
          this.total = this.logs.length
        } else {
          console.error('获取数据失败:', res.message)
        }
      } catch (error) {
        console.error('获取数据错误:', error)
      }
    },
    // 查询方法
    async search () {
      try {
        const json = {
          stuId: this.studentId || null,
          stuName: this.studentName || null,
          operatorId: this.operatorId || null,
          operatorName: this.operatorName || null,
          operationType: this.operationType || null,
          startTime: this.dateRange && this.dateRange[0] !== undefined ? this.dateRange[0] : null,
          endTime: this.dateRange && this.dateRange[1] !== undefined ? this.dateRange[1] : null
        }
        console.log(json)
        const res = await selectLogs(json)
        if (res.status && res.data) {
          this.logs = res.data.map(item => ({
            logId: item.logId,
            operationType: item.operationType,
            name: item.name,
            studentId: item.studentId,
            operatorName: item.operatorName,
            operatorId: item.operatorId,
            operationTime: item.operationTime.replace('T', ' ')
          }))
          this.total = this.logs.length
          console.log(this.total)
        } else {
          console.error('获取数据失败:', res.message)
        }
      } catch (error) {
        console.error('获取数据错误:', error)
      }
    },
    handlePageChange (page) {
      this.currentPage = page
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.currentPage = 1
    },
    handleJumpPage () {
      const page = parseInt(this.jumpPage)
      if (page >= 1 && page <= Math.ceil(this.total / this.pageSize)) {
        this.currentPage = page
      } else {
        // 页码超出范围
      }
    }
  }
}
</script>

<style scoped>
.container {
  min-width: 1666px;
  top: 0px;
  left: 7px;
  background: #eeeeee;
  padding: 20px;
  max-height: 90vh;
  overflow-y: auto;
}

.title {
  font-size: 21px;
  font-weight: 500;
  margin-bottom: 15px;
  display: block;
}

.main-card {
  padding: 10px;
}

.top {
  width: 100%;
  height: 20px;
}

.bottom {
  align-items: center;
  width: 100%;
  height: 36px;
  margin-top: 10px;
  display: flex;
}

.bo2 {
  width: 133px;
  height: 36px;
  margin-left: 23px;
  margin-top: 20px;
  margin-bottom: 16px;
}

hr.hr1 {
  background: rgb(246 246 246);
  height: 3px;
  border: none;
}

.els {
  width: 211px; /* 自定义宽度 */
}

.bo3 {
  margin-top: 0;
  margin-bottom: 30px;
  background: #ffffff;
}

.bo4 {
  height: 20px;
  background: #ffffff;
}

.pagination-container {
  height: 100px;
  position: absolute;
  left: 400px;
}

.search-button {
  background-color: #0e69c4;
  border-color: #0e69c4;
  color: #ffffff;
  margin-left:50px;
}
.button-container {
  display: flex;
}

.reset-button {
  color: #166AFF;
  border-color: #166AFF;
}

.table-header {
  background-color: #666666;
  color: #ffffff;
  font-weight: bold;
}
</style>
